﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>Validation Tests</title>

		<style type="text/css">.sys-template { visibility:hidden; display:none; }</style>

		<link href="../Common/Styles/qunit.css" type="text/css" rel="stylesheet" />
		
		<script src="../Common/Scripts/JQuery/jquery-1.3.2.js" type="text/javascript"></script>
		<script src="../Common/Scripts/QUnit/qunit.js" type="text/javascript"></script>
		<script src="../Common/Scripts/Microsoft/MicrosoftAjax.debug.js" type="text/javascript"></script>
		<script src="../Common/Scripts/Microsoft/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.js" type="text/javascript"></script>
		<script src="../Common/Scripts/QUnit/qunit.ext.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.model.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.mapper.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.mock.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.jquery.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.ui.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.view.js" type="text/javascript"></script>
		<script src="../Common/Scripts/mock-driver.js" type="text/javascript"></script>
		<script src="ChangeSet.js" type="text/javascript"></script>
		
		<script type="text/javascript">

    		Sys.activateDom = false;

    		ExoWeb.trace.flags = { rule: true }

    		$extend("Car", function(type) { type.formats.$label = ExoWeb.Model.Format.fromTemplate("{Name}"); });
    		$extend("Driver", function(type) { type.formats.$label = ExoWeb.Model.Format.fromTemplate("{Name}"); });
    		$extend("Dealer", function(type) { type.formats.$label = ExoWeb.Model.Format.fromTemplate("{Name}"); });
    		$extend("OwnerLocation", function(type) { type.formats.$label = ExoWeb.Model.Format.fromTemplate("{Name}"); });

    		var context = ExoWeb.context({
    			model: {
    				driver: { id: "1", from: "Driver", and: ["this.Owner.Location.Address.State", "this.Cars", "this.Dealer", "this.Dealer.AvailableCars"] }
    			}
    		});

    		context.ready(function() {
    			Sys.Application.activateElement(document.documentElement);
    		});

    		var valFn = jQuery.fn.val;
    		jQuery.fn.val = function(val) {
    			if (arguments.length === 0) {
    				return valFn.apply(this, arguments);
    			}
    			else {
    				this.each(function() {
    					var old = valFn.call($(this));

    					var result = valFn.call($(this), val);

    					if (old != valFn.call($(this))) {
    						if (this.fireEvent) { this.fireEvent("onchange"); }
    						else if (this.dispatchEvent) {
    							var evt = document.createEvent("MutationEvents");
    							evt.initEvent("change", false, true);
    							this.dispatchEvent(evt);
    						}
    					}
    				});

    				return this;
    			}
    		};

    		setupTest("test1", { description: "Driver Name Required" }, function(sender, args) {
	    		var $el = $(".driver-name input");

    			var issues = null;
    			$el.validated(function(sender, e) {
    				issues = e;
    			});

    			$el.val("");
    			equals(issues.length, 1, "Element should have one issue");

    			$el.val("Test");
    			equals(issues.length, 0, "Element should have zero issues");
    		});

    		setupTest("test2", { description: "Phone Number Format" }, function(sender, args) {
    			var $el = $(".driver-phone input");

    			var issues = null;
    			$el.validated(function(sender, e) {
    				issues = e;
    			});

    			var original = $el.val();

    			$el.val("123-456");
    			equals(issues.length, 1, "Element should have one issue");

    			$el.val(original);
    			equals(issues.length, 0, "Element should have zero issues");

    			$el.val("123-456-7890");
    			equals(issues.length, 0, "Element should have zero issues");
    		});
		</script>
	</head>
	<body xmlns:sys="javascript:Sys" 
			xmlns:dataview="javascript:Sys.UI.DataView" 
			xmlns:mycontrol="javascript:ExoWeb.UI.MyControl" 
			xmlns:field="javascript:ExoWeb.UI.Field" 
			xmlns:content="javascript:ExoWeb.UI.Content" 
			xmlns:template="javascript:ExoWeb.UI.Template"
			sys:activate="*">		


		<!-- QUnit Display -->
		<h1 id="qunit-header">Test Results:</h1>
		<h2 id="qunit-banner"></h2>
		<h2 id="qunit-userAgent"></h2>
		<ol id="qunit-tests"></ol>

		<div class="sys-template" sys:attach="dataview" dataview:data="{~ context.model.driver }">
			<div class="sys-template driver-name" sys:attach="dataview" dataview:data="{@ Name, prefix=Driver }" 
				dataview:onrendered="{{ executeTest.prependArguments('test1') }}">
				
				<input type="text" sys:value="{ binding displayValue }" />
			</div>
			<div class="sys-template driver-phone" sys:attach="dataview" dataview:data="{@ PhoneNumber, label=Phone Number }" 
				dataview:onrendered="{{ executeTest.prependArguments('test2') }}">
				
				<input type="text" sys:value="{ binding displayValue }" />
			</div>
			<div class="sys-template" sys:attach="dataview" dataview:data="{@ BirthDate, label=Birthday }">
				<input type="text" sys:value="{ binding displayValue }" />
			</div>
			<div class="sys-template" sys:attach="dataview" dataview:data="{@ Cars }">
				<table>
					<tbody class="sys-template" sys:attach="dataview" 
						dataview:data="{ binding options }">
						<tr>
							<td>
								<input type="checkbox" id="Checkbox1" sys:checked="{ binding selected }" />
								<label for="option">{ binding displayValue }</label>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="sys-template" sys:attach="dataview" dataview:data="{@ Dealer }">
				<select class="sys-template" sys:value="{ binding systemValue }"
					sys:attach="dataview" dataview:data="{ binding options }">
					<option sys:if="{{ $index === 0 }}" value=""></option>
					<option sys:value="{ binding systemValue }">{ binding displayValue }</option>
				</select>
			</div>
			<div class="sys-template" sys:attach="dataview" dataview:data="{@ Dealer.Name, prefix=Dealer }">
				<input type="text" sys:value="{ binding displayValue }" />
			</div>
			<div class="sys-template" sys:attach="dataview" dataview:data="{@ Notes }">
				<textarea sys:value="{ binding displayValue }" rows='4' cols='60'></textarea>
			</div>
		</div>
	</body>
</html>
